<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";

// 表格数据
const tableData = ref([
  {
    id: 2,
    title: '200团测计划',
    progress: 75,
    begin: '2025-01-15',
    end: '2025-02-15'
  },
  {
    id: 3,
    title: '150团测计划',
    progress: 30,
    begin: '2025-01-20',
    end: '2025-02-28'
  },
  {
    id: 4,
    title: '300团测计划',
    progress: 100,
    begin: '2024-12-01',
    end: '2025-01-10'
  },
  {
    id: 5,
    title: '120团测计划',
    progress: 20,
    begin: '2025-02-01',
    end: '2025-03-01'
  },
  {
    id: 6,
    title: '250团测计划',
    progress: 90,
    begin: '2025-02-10',
    end: '2025-03-10'
  },
  {
    id: 7,
    title: '180团测计划B',
    progress: 60,
    begin: '2025-03-01',
    end: '2025-04-01'
  },
  {
    id: 8,
    title: '160团测计划',
    progress: 5,
    begin: '2025-03-15',
    end: '2025-04-15'
  },
  {
    id: 9,
    title: '220团测计划',
    progress: 40,
    begin: '2025-04-01',
    end: '2025-05-01'
  },
  {
    id: 10,
    title: '190团测计划',
    progress: 85,
    begin: '2025-04-10',
    end: '2025-05-10'
  },
  {
    id: 11,
    title: '350团测计划',
    progress: 0,
    begin: '2025-05-01',
    end: '2025-06-01'
  },
  {
    id: 2,
    title: '200团测计划',
    progress: 75,
    begin: '2025-01-15',
    end: '2025-02-15'
  },
  {
    id: 3,
    title: '150团测计划',
    progress: 30,
    begin: '2025-01-20',
    end: '2025-02-28'
  },
  {
    id: 4,
    title: '300团测计划',
    progress: 100,
    begin: '2024-12-01',
    end: '2025-01-10'
  },
  {
    id: 5,
    title: '120团测计划',
    progress: 20,
    begin: '2025-02-01',
    end: '2025-03-01'
  },
  {
    id: 6,
    title: '250团测计划',
    progress: 90,
    begin: '2025-02-10',
    end: '2025-03-10'
  },
  {
    id: 7,
    title: '180团测计划B',
    progress: 60,
    begin: '2025-03-01',
    end: '2025-04-01'
  },
  {
    id: 8,
    title: '160团测计划',
    progress: 5,
    begin: '2025-03-15',
    end: '2025-04-15'
  },
  {
    id: 9,
    title: '220团测计划',
    progress: 40,
    begin: '2025-04-01',
    end: '2025-05-01'
  },
  {
    id: 10,
    title: '190团测计划',
    progress: 85,
    begin: '2025-04-10',
    end: '2025-05-10'
  },
  {
    id: 11,
    title: '350团测计划',
    progress: 0,
    begin: '2025-05-01',
    end: '2025-06-01'
  }
])
// tableData复制品
const tableDataCopy = ref([])
// 获得进度条类型
const getProgressType = (num) => {
  if (num === 100) return 'success'
  else if (num < 100 && num >= 50) return 'warning'
  else return 'exception'
}
// 搜索输入的标题
const inputTitle = ref('')
// 搜索
const search = () => {
  tableData.value = []
  for (let i = 0; i < tableDataCopy.value.length; i++) {
    if (inputTitle.value && inputTitle.value !== '' && !tableDataCopy.value[i].title.includes(inputTitle.value)) continue
    tableData.value.push(tableDataCopy.value[i])
  }
}
// 刷新
const fresh = () => {
  window.location.reload()
  ElMessage.success('刷新成功')
}
// 控制生成报告的对话框
const reportDialogVisible = ref(false)

import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
import { ArrowDown } from '@element-plus/icons-vue'
// 当前选中的行
const currentRow = ref({})

// 下载PDF报告
const downloadPDF = async () => {
  try {
    // 获取PDF文件
    const response = await fetch('/docs/user/团测报告PDF.pdf');
    if (!response.ok) {
      throw new Error(`无法加载PDF文件: ${response.statusText}`);
    }

    // 获取文件名
    const fileName = '团测报告PDF.pdf';

    // 创建Blob对象
    const blob = await response.blob();

    // 创建下载链接
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = fileName;
    document.body.appendChild(link);
    link.click();

    // 清理
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);

    ElMessage.success('PDF报告下载成功！');
  } catch (error) {
    console.error('PDF下载失败:', error);
    ElMessage.error(`PDF下载失败: ${error.message}`);
  }
};
// onMounted
onMounted(() => {
  tableDataCopy.value = tableData.value
})
</script>

<template>
  <div class="search-box">
    <el-row>
      <el-col :span="14"><span style="color: rgba(0, 0, 0, 0.3)">温馨提示: 若团测进度为0，则表示没有报告可以生成</span></el-col>
      <el-col :span="7">
        <el-input v-model.trim="inputTitle" style="width: 350px" placeholder="请输入标题" />
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="primary" @click="fresh">刷新</el-button>
      </el-col>
    </el-row>
  </div>
  <div class="table-box">
    <el-table :data="tableData" style="width: 100%;" height="500px">
      <el-table-column fixed prop="title" label="团测标题" min-width="180" />
      <el-table-column prop="progress" label="进度" min-width="350" >
        <template #default="scope">
          <el-progress :text-inside="true" :stroke-width="16" :percentage="scope.row.progress" :status="getProgressType(scope.row.progress)" />
        </template>
      </el-table-column>
      <el-table-column prop="begin" label="测评开始时间" min-width="200"/>
      <el-table-column prop="end" label="测评结束时间" min-width="200" />
      <el-table-column fixed="right" label="操作" min-width="180" >
        <template #default="scope">
          <el-button link type="primary" size="small" @click="currentRow = scope.row; reportDialogVisible = true">团体报告</el-button>
          <!-- 下拉菜单：更多 -->
<!--          <el-dropdown trigger="click">-->
<!--            <el-button link type="primary" size="small" style="margin-left: 10px;padding-top: 7px">-->
<!--              更多-->
<!--              <el-icon class="el-icon&#45;&#45;right"><arrow-down /></el-icon>-->
<!--            </el-button>-->
<!--            <template #dropdown>-->
<!--              <el-dropdown-menu>-->
<!--                <el-dropdown-item command="personalReport">个人报告</el-dropdown-item>-->
<!--                <el-dropdown-item command="rawData">原始数据</el-dropdown-item>-->
<!--                <el-dropdown-item command="alertData">预警数据</el-dropdown-item>-->
<!--              </el-dropdown-menu>-->
<!--            </template>-->
<!--          </el-dropdown>-->
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 生成报告的对话框 -->
  <el-dialog v-model="reportDialogVisible" title="生成报告" width="500">
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="reportDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="downloadPDF">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.search-box {
  padding: 10px;
}
.table-box {
  padding: 10px;
}
</style>
